<template>
	<view class="wc-lottery-drawing flex-center">
		
		<view class="box flex-center row-around">
			<view class="box-header" >
				<view class="close flex-center" @click="close">
					<text>X</text>
				</view>
			</view>
			<view class="box-content">
				
				<view v-if="isEmpty" style="font-size: 24px;color: #FF341F;">{{ content }}</view>
				<view v-else>
					<!-- <price
					    :content="content"
					    mainSize="120rpx"
					    minorSize="69rpx"
						color="#FF341F"
					>
					</price> -->
				</view>
				<view class="text-center" style="font-size: 18rpx; color: #FF341F;">获得的福利在“钱包”中查看</view>
			</view>
			<view class="box-footer">
				<button 
					size="mini"
					class="btn"
					hover-class="is-hover"
					@click="gotoPage"
				>去钱包看看</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	const emptyText = '谢谢惠顾'
	// import price from " components/price/price.vue"
	export default {
		name: "LotteryDrawing",
		components: {
			// price
		},
		props: {
			text: {
				type: String,
				default: '22'
			}
		},
		computed: {
			
			isEmpty(v) {
				if (!this.text || this.text === '0' || this.text === emptyText) {
					return true
				}
				return false
			},
			content() {
				if (!this.text || this.text === '0') {
					return emptyText
				}
				return this.text
			},
			
		},
		data() {
			return {
				
			};
		},
		methods: {
			close() {
				this.$emit('close')
			},
			gotoPage() {
				
				uni.reLaunch({
					url: '/bundle/pages/user_wallet/user_wallet'
				})
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>

.wc-lottery-drawing {
	width: 100%;
	height: 100%;
	
}

.box {
	width: 430rpx;
	height: 458rpx;
	background-image: url('@/static/img/lottery/lottery_item_bg1.png');
	background-repeat: no-repeat;
	background-size: cover;
	animation-name: box;
	animation-duration: 2s;
	
}
.box-header{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	width: 100%;
	padding: 40rpx 30rpx;
	
	.close {
		width: 45rpx;
		height: 45rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 50%;
		opacity: 0.8;
	}
}
.box-content {
	width: 100%;
	height: 214rpx;
	text-align: center;
}
.box-footer{
	.btn {
		width: 236rpx;
		padding: 0;
		padding: 15rpx;
		margin-top: 10rpx;
		font-size: 30rpx;
		line-height: 1;
		
		font-weight: 500;
		border-radius: 30rpx;
		color: #FF341F;
		background: #FBE945;
	}
}

@keyframes box {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
</style>
